<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>后台管理系统</title>
<%@include file="/WEB-INF/base.jspf"%>
<style>

.layui-inline {
	height: 100px;
}

#hymc {
	margin: 2px;
	height: 37px;
}
table th,table tr,table td {
text-align: center;
vertical-align:middle;
}
.hidden-td {
	display:none;
}
</style>
	</head>
	<body>
		<div>
			<div >
			<div class="" style="padding:16px 0;display:flex;align-items:center;">
					<input type="text" id="guanjianzi" class="form-control" placeholder="关键词" style="width:200px;margin-right:16px;"> 
					<button class="layui-btn layui-btn-radius" id="id-searchTableBtn">查询</button>
					<button class="layui-btn layui-btn-radius" id="id-resetTableBtn">重置</button>
			</div>			
			</div> 
			<div>
				<table id="table-i-userList" class="talbe-c-userList class-tableDataTable table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th style="display:none;"></th>
							 <th>代理账号</th>
							 <th>账号余额</th>
							 <th>代理金额</th>
							 <th>注册时间</th>
							 <th>登录IP</th>
							 <th>用户层级</th>
							 <th>用户状态</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${user}" var="emp" varStatus="statu">
						  <tr class="danhangsj class-tr-dataTableTr">
						  	<td class="td-c-userId" style="display:none;">${emp.id}</td>
							<td class="yid-td">${emp.name}</td>
							<td class="sex-td">${emp.balance}</td>
							<td class="yname-td">${emp.money}</td>
							<td class="phone-td">${emp.createtime}</td>
							<td class="njob-td">${emp.registerIp}</td>
							<td class="njob-td"><button class="btn btn-info btn-c-viewXiaJi">查看下级</button></td>
							<c:if test="${emp.state=='1' }">
								<td class="njob-td"><span class="btn btn-success">启用</span></td>
							</c:if>
							<c:if test="${emp.state=='0' }">
								<td class="njob-td"><span class="btn btn-danger">禁用</span></td>
							</c:if>				
						</tr>
					</c:forEach> 
					</tbody>
				</table>
			</div>
		</div>
		
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true" style="z-index:1081;">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>  

<div class="modal fade" id="allNextLevelModal" tabindex="-1" role="dialog" aria-labelledby="allNextLevelModal" aria-hidden="true" style="z-index:1050;">
    <div class="modal-dialog class-fake-alert" style="width:1000px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" >
            <span style="font-weight:bold;color:red;display:inline-block;margin-bottom:10px;">注：此查询只能看到直接下级</span>
            		<table id="table-i-dailiList"  class="table table-striped table-bordered table-hover">
            			<thead>
            				<tr>
            					<th>用户名称</th>
            					<th>账号余额</th>
            					<th>返点金额</th>
            					<th>用户QQ</th>
            					<th>注册时间</th>
            					<th>登录时间</th>
            					<th>用户状态</th>
            					<th>更换上级</th>
            				</tr>
            			</thead>
            			<tbody>
            			</tbody>
            		</table>
            </div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>  

<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-labelledby="changeModal" aria-hidden="flase" style="z-index:1060;">
    <div class="modal-dialog class-fake-alert" style="width:1000px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4>更换上级</h4>
            </div>
            <div class="modal-body" >
            		<table id="table-i-changeShangJiList" class="talbe-c-userList class-tableDataTable table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th style="display:none;"></th>
							<th>操作</th>
							 <th>代理账号</th>
							 <th>账号余额</th>
							 <th>代理金额</th>
							 <th>注册时间</th>
							 <th>登录IP</th>
							 <th>用户状态</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${user}" var="emp" varStatus="statu">
						  <tr class="danhangsj class-tr-dataTableTr">
						  	<td><button class="btn-c-chooseNewShangJi btn btn-default">选择</button></td>
						  	<td class="td-c-userId" style="display:none;">${emp.id}</td>
							<td class="yid-td">${emp.name}</td>
							<td class="sex-td">${emp.balance}</td>
							<td class="yname-td">${emp.money}</td>
							<td class="phone-td">${emp.createtime}</td>
							<td class="njob-td">${emp.registerIp}</td>
							<c:if test="${emp.state=='1' }">
								<td class="njob-td"><span class="btn btn-success">启用</span></td>
							</c:if>
							<c:if test="${emp.state=='0' }">
								<td class="njob-td"><span class="btn btn-danger">禁用</span></td>
							</c:if>				
						</tr>
					</c:forEach> 
					</tbody>
				</table>
            </div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>  


	<script>
	var INDEX = "0"
	$(".talbe-c-userList").DataTable({
	      "bLengthChange": true,      
	      "bAutoWidth": false,
	      "bSort": false,
	      "dom": "t<'tableinfo'i<'tableSearch'p>l>",
	      'aLengthMenu':[5, 10, 20],
	       //"order": [[ 9, "asc" ]],  
	       "searching": true,  
	       "columnDefs": [
	                      { "searchable": false, "targets": 5 },
	                      { "searchable": false, "targets": 6 },
	                    ],			       
	       "language": {//语言设置  
	            "lengthMenu": "每页显示 _MENU_ 条记录",     
	            "zeroRecords": "没有检索到数据",     
	            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
	            "info": "没有数据",     
	            "oPaginate": {     
	                "sFirst": "首页",     
	                "sPrevious": "前一页",     
	                "sNext": "后一页",     
	                "sLast": "尾页"    
	          	},
	            "search":"搜索:",
	            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
	            "infoEmpty":      "没有找到匹配的信息",
	         },      
	    })		
	    insertSearchBtn()
			var bindResetBtnEvent = function() {
				var btn = document.querySelector("#id-resetTableBtn")
				btn.addEventListener("click", function(event) {
					document.querySelector("#guanjianzi").value = ""
					$("#table-i-userList").DataTable()
					.search("")
					.draw()
				})
			}	
			
			var bindSearchBtnEvent = function() {
				var btn = document.querySelector("#id-searchTableBtn")
				btn.addEventListener("click", function(event) {
					var guanjianziValue = document.querySelector("#guanjianzi").value
					$("#table-i-userList").DataTable()
					.search(guanjianziValue)
					.draw()
				})
			}
			bindSearchBtnEvent()
			bindResetBtnEvent()	    
	    $("#table-i-userList_wrapper").on("click", function(event) {
	    	var $event = $(event.target)
	    	if ($event.hasClass("btn-c-viewXiaJi")) {
	    		INDEX = $event.closest("tr").find(".td-c-userId").text()
				var table = $("#table-i-dailiList").DataTable()		
				table.ajax.url("/wholesubordinate.do").load()	
				$("#allNextLevelModal").modal("show")
	    	}
	    })
	    $("#table-i-dailiList").DataTable({
		      "bLengthChange": true,      
		      "bAutoWidth": false,
		      "bSort": false,
		      "dom": `t<"tableToolBar" p<"lengthWrapper" l>i>`,
		      'aLengthMenu':[5, 10, 20],
		       //"order": [[ 9, "asc" ]],  
		       "searching": true,  
		       "language": {//语言设置  
		            "lengthMenu": "每页显示 _MENU_ 条记录",     
		            "zeroRecords": "没有检索到数据",     
		            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
		            "info": "没有数据",     
		            "oPaginate": {     
		                "sFirst": "首页",     
		                "sPrevious": "前一页",     
		                "sNext": "后一页",     
		                "sLast": "尾页"    
		          	},
		            "search":"搜索:",
		            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
		            "infoEmpty":      "没有找到匹配的信息",
		         }, 
		         "columns": [
		                     { "data": "name" },
		                     { "data": "balance" },
		                     { "data": "money"},
		                     { "data": "qq"},
		                     { "data": "createtime"},
		                     { "data": "lastTime"},
		                     { "data": "state", "className": "td-c-stateValue"},
		                     {"data": null, "defaultContent": "<button class='btn btn-warning btn-c-changeShangJi btn-sm'>更换</button>"},
		                     { "data": "id", "className": "td-c-id hidden-td"},
		                   ],	 
			      "ajax": {
		    	  	  "type": 'post',
		    	      "url":"/wholesubordinate.do", 
			    	  "data": function ( d ) {
			    	        d.id = INDEX
			    	    }
			      },	
 		          "drawCallback": function( settings ) {
 		        	 $("#table-i-dailiList tbody .td-c-stateValue").each(function(index, element) {
 		        		 var $e = $(element)
  		        		 if ($e.text() == "1") {
 		        			 $e.html("<span class='btn btn-success'>启用</span>")
 		        		 } 
  		        		 else if ($e.text() == "0") {
 		        			$e.html("<span class='btn btn-danger'>禁用</span>")
 		        		 } 
 		        	 })
 		          }			      
		       })
		       
		       // 
		       $("#table-i-dailiList").on("click", ".btn-c-changeShangJi", function(e) {
		    	   $("#changeModal").attr("data-id", $(e.currentTarget).closest("tr").find(".td-c-id").text())
		    	   $("#changeModal").modal("show")
		       })
		       $("#table-i-changeShangJiList").on("click", ".btn-c-chooseNewShangJi", function(e) {
		    	   var currentId = $(e.currentTarget).closest("tr").find(".td-c-userId").text()
		       	   if (currentId == $("#changeModal").attr("data-id")) {
		       		   showNoticeModal("无法选择自己作为上级代理")
		       		   return
		       	   }
		   		$.ajax({
					url: "/kajhsgweasdqtwehghasfdnsak6868/changeJunior.do",
					type:"post",
					data:{fid: currentId, id: $("#changeModal").attr("data-id"),},
					dataType:"json",
					success:function(data){
						showNoticeModal("更换成功！")
						$("#changeModal").modal("hide")
						var table = $("#table-i-dailiList").DataTable()		
						table.ajax.url("/wholesubordinate.do").load()						
					},
				});
		       })
	</script>
	</body>
</html>


	